<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">{{$t('camera').photograph}}</block>
		</cu-custom>

		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
				<view :class="['text-' + item.color]">
					<image :src="item.cuIcon" style="width: 80rpx;height: 80rpx;align-items: center;justify-content: center;"> </image>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>

		<view class="nav-list">
			<view hover-class='none' class="nav-li" navigateTo :class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
			 style="justify-content: center;align-items: center;" v-for="(item,index) in elements" @click="takePicture(index)"
			 :key="index">
				<view class="nav-title">{{item.title}}</view>
				<view class="nav-name">{{item.name}}</view>
				<text :class="'cuIcon-' + item.cuIcon"></text>
			</view>
		</view>
		<view class="preview-view">
			<image class="preview-img" mode="widthFix" :src="previewImgUrl"></image>
		</view>

	</view>

</template>

<script>
	var _self = null
	var ExifImage = require('../../components/compress-image/base64image.js');
	export default {
		data() {
			return {
				imageSelect: false,
				cuIconList: [{
					cuIcon: '/static/notice_normal_face.png',
					color: 'red',
					badge: 0,
					name: this.$t('camera').tips1
				}, {
					cuIcon: '/static/notice_head_on.png',
					color: 'orange',
					badge: 0,
					name: this.$t('camera').tips2
				}, {
					cuIcon: '/static/notice_light_full.png',
					color: 'yellow',
					badge: 0,
					name: this.$t('camera').tips3
				}],
				gridCol: 3,
				gridBorder: false,
				elements: [{
						title: '拍照',
						name: 'camera',
						color: 'red',
						cuIcon: 'myfill'
					},
					{
						title: '相册',
						name: 'pciture',
						color: 'olive',
						cuIcon: 'album'
					},
				],
				previewImgUrl: ''
			}
		},
		onLoad() {
			_self = this
		},
		methods: {
			/* ----------图像处理 ------------------*/
			async getImageOrientation(url) {
				let Orientation = 1;
				let maxWidth = 720;
				await ExifImage.getImageTag(url, 'Orientation', function(e) {
					if (e != undefined) Orientation = e;
				})
				var img = null;
				var canvas = null;
				await ExifImage.comprossImage(url, maxWidth, function(e) {
					img = e.img;
					canvas = e.canvas;
				});
				// console.log('图片旋转角度', Orientation)
				let baseStr = ''; //如果方向角不为1，都需要进行旋转  	
				switch (Orientation) {
					case 6: //需要顺时针（向右）90度旋转  		
						console.log('（向右）90度旋转');
						baseStr = ExifImage.rotateImg(img, 'right', canvas);
						break;
					case 8: //需要逆时针（向左）90度旋转  
						console.log('向左）90度旋转');
						baseStr = ExifImage.rotateImg(img, 'left', canvas);
						break;
					case 3: //需要180度旋转 转两次  				        console.log('需要180度旋转');  				
						baseStr = ExifImage.rotateImg(img, 'right', canvas, 2);
						break;
					default:
						baseStr = ExifImage.rotateImg(img, '', canvas);
						break;
				}
				let blob = _self.dataURLtoBlob(baseStr);
				let blob_url = URL.createObjectURL(blob);
				console.log('图片旋转', blob_url);
				_self.previewImgUrl = blob_url;
				_self.checkFace()
			},
			dataURLtoBlob(dataurl) {
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},
			/* ----------图像处理 ------------------*/

			takePicture(index) {
				var sourceType = index == 0 ? ['camera'] : ['album']
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: sourceType, //从相册选择
					success: (res) => {
						_self.getImageOrientation(res.tempFilePaths.shift())
					}
				});
			},
			checkFace() {
				uni.showLoading({
					title: this.$t('camera').title
				})
				uni.uploadFile({
					
					url: _self.$constant.BASEURL + _self.$constant.CHECK_PERSON_IN_IMG,
					// url:"https://kq.lsyat.com/" + _self.$constant.CHECK_PERSON_IN_IMG,
					filePath: _self.previewImgUrl,
					name: 'personphotos',
					success: (res) => {
						// console.log(res.data)
						try{
							var result = JSON.parse(res.data.toString())
							// console.log(result)
							if (result.code == 0) {
								//检测成功，有人脸
								let pages = getCurrentPages()
								let prePage = pages[pages.length - 2]
								// prePage.imgurl = _self.previewImgUrl
								this.$set(prePage.imgList, 0,  _self.previewImgUrl);
								console.log('prePage.imgurl=',_self.previewImgUrl)
								uni.navigateBack({
									delta: 1
								})
								// this.$router.go(-1)
							} else {
								//未检测到人脸
								uni.showModal({
									title: this.$t('faild'),
									showCancel: false,
									content: result.message,
									cancelText: this.$t('sure'),
									confirmText: this.$t('cancel')
								})
							}
						}catch(e){
							uni.showModal({
								title: this.$t('netErrors'),
								showCancel: false,
								content: this.$t('parameterError'),
								cancelText: this.$t('sure'),
								confirmText: this.$t('cancel')
							})
						}				
					},
					fail(err) {
						uni.showToast({
							title: this.$t('netErrors'),
							icon: 'none'
						})
					},
					complete(res) {
						// console.log('1111111111111')
						uni.hideLoading()
					}
				});
			}



		}

	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.preview-view {
		display: flex;
		justify-content: center;
	}

	.preview-img {
		width: 200upx;
	}

	.myimg {
		width: 200upx;
		height: 200upx;
		border-radius: 0 !important;
		margin: 40px;
	}

	.myimg2 {
		width: 200upx;
		height: 200upx;
		border-radius: 100%;
		margin: 40px;
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40upx 0px;
		justify-content: space-between;
	}

	.nav-li {
		padding: 30upx;
		border-radius: 12upx;
		width: 45%;
		margin: 0 2.5% 40upx;
		/* background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); */
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
		font-size: 32upx;
		font-weight: 300;
	}

	.nav-title::first-letter {
		font-size: 40upx;
		margin-right: 4upx;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}

	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}
</style>
